CircleCIの新UIでHello Worldしてみた

CircleCI初級者が新UIでサインアップからGitHub連携のビルドを行うまで。

#CI

#GitHub

#CircleCI

#CI/CD

若槻龍太

2020.04.16

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部の若槻です。

現在、CI/CDサービスCircleCIでは新しいユーザーインターフェイス（新UI）が導入されつつあります。

Introducing our redesigned UI: built for increased user productivity

そこで今回はCircleCIのドキュメントを参考にしつつ、この新UIからHello Worldをしてみました。

CircleCIのサインアップ

まず、ドキュメント[CircleCI を始める]をもとにCircleCIのサインアップを行います。連携させるVCSはGitHubです。

ユーザー登録ページにアクセスします。[GitHun でログイン]をクリックします。

CircleCIに連携するGitHubアカウントへのサインインを求められます。ID・パスワードを入力し[Sign in]をクリックして認証を行います。

CircleCIに付与される権限が示されるので確認したら[Authorize circleci]をクリックします。GitHubの場合はPublicおよびPrivateリポジトリの読み取り/書き込み権限、ユーザーメールアドレスの読み取り権限がCircleCIに付与されるようです。

GitHubのどのorganizationを連携するか選択を求められるので選択します。

すると[Projects]ページが開き、連携したGitHub組織からリポジトリが読み込まれていることがProject一覧から確認できます。ユーザーインターフェイスはすでに新UIになっていますね。

これでCircleCIへのGitHub連携によるサインアップができました。

Hello Worldをしてみる

次に、ドキュメント[Hello World]をもとにCircleCIでHello Worldをしてみます。

まずGitHubで新しいリポジトリを作ります。今回はcircleci-helloworldという名前で作りました。

すると、CircleCIのProject一覧に「circleci-helloworld」リポジトリがProjectとして自動で追加されました。このリポジトリの[Set Up Project]をクリックします。

[Add Config]をクリックします。

Pipeline一覧ページに自動遷移します。circleci-project-setupというブランチのwelcomeというworkflowが2つ開始されています。

GitHubでcircleci-helloworldリポジトリを見ると、circleci-project-setupブランチが作成され、ファイル.circleci/config.ymlが追加されていました。

また、circleci-helloworldリポジトリのデフォルトブランチがcircleci-project-setupブランチに変更されていました。（これはちょっと予想外の動作でした）

circleci-project-setupブランチに作成された.circleci/config.ymlファイルは以下のような内容でした。

# Use the latest 2.1 version of CircleCI pipeline process engine. See: https://circleci.com/docs/2.0/configuration-reference
version: 2.1
# Use a package of configuration called an orb.
orbs:
  # Declare a dependency on the welcome-orb
  welcome: circleci/welcome-orb@0.4.1
# Orchestrate or schedule a set of jobs
workflows:
  # Name the workflow "welcome"
  welcome:
    # Run the welcome/run job in its own container
    jobs:
      - welcome/run

workflowはどちらもSUCCESSとなりました。（なんで２つ走ったんだろう…）

次に、.circleci/config.ymlを以下の内容で更新してコミットします。

version: 2
jobs:
  build:
    docker: # Executor タイプです。他に machine、macOS という実行タイプを指定できます
      - image: circleci/node:4.8.2 # プライマリコンテナです。このなかでジョブコマンドが実行されます
    steps:
      - checkout # プロジェクトのディレクトリにあるコードをチェックアウトします
      - run: echo "hello world" # 「echo」コマンドを実行します

更新とコミットはGitHubのコンソールから行いました。